.container{
    height: calc(100vh - 150rpx);
    position: relative;
}
.writing-img{
    width: 445rpx;
    height: 207rpx;
    position: absolute;
    left: 54rpx;
}
.info-box{
    position: relative;
    z-index: 9;
    .bg1-img{
        width: 100%;
        height: 180rpx;
    }
    .info-head{
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title{
            color: #F39B27;
            margin-top: 26rpx;
            font-size: 32rpx;
        }
        .tips{
            margin-top: 70rpx;
            color: #D96E4C;
            font-size: 28rpx;
        }
    }
    .info{
        width: 100%;
        height: auto;
        position: absolute;
        left: 0;
        top: 180rpx;
        background: #ffffff;
        @include padding-box(0 48rpx 120rpx);
        .info-i{
            width: 100%;
            @include padding-box(48rpx 0 32rpx 0);
            box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(222, 224, 227, 0.4);
        }
        .img{
            width: 28rpx;
            height: 28rpx;
        }
        .info-input{
            text-align: right;
            flex: 1;
            color: #000;
        }
        .upload-title{
            margin-top: 48rpx;
        }
        .upload-img{
            width: 150rpx;
            height: 150rpx;
            margin-top: 32rpx;
            margin-right: 16rpx;
        }
        .upload-img-active{
            border-radius: 16rpx;
        }
    }
    
}

.shallow-grey{
    color: #D5D7E2;
}